<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar class="bar" title="购物车" />
    <Scroll class="con">
      <div>
        <!-- 占位符 -->
        <div style="height: 5px"></div>
        <!-- 每一项循环数据 -->
        <div class="item" v-for="(item, index) in state.list" :key="item.id">
          <!-- 选择框 -->
          <van-checkbox
            @click="itemCheckbox(item)"
            class="ml-1"
            :checked="item.checked"
          ></van-checkbox>
          <!-- 每一项 -->
          <van-swipe-cell class="item" right-width="85">
            <!-- 商家信息 -->
            <div class="d-flex align-items-center">
              <!-- 商家头像 -->
              <van-image
                round
                width="20"
                height="20"
                fit="cover"
                :src="item.shopLogo"
              />
              <span class="name"
                >{{ item.shopName }} <van-icon name="arrow"
              /></span>
            </div>
            <!-- 商品信息 -->
            <van-card
              class="goods-card"
              :num="item.count"
              :price="item.price"
              :title="item.title"
              :thumb="item.img"
              :origin-price="item.oldPrice"
              @click-thumb="Clickimg(item.id)"
            >
              <template #tags>
                <van-tag @click="tags(item)" class="mt-1" plain type="danger"
                  >点击选择参数</van-tag
                >
              </template>
            </van-card>
            <!-- 删除按钮 -->
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="deletes(index)"
              />
            </template>
          </van-swipe-cell>
        </div>

        <!-- 猜你喜欢上面的图片 -->
        <div
          class="d-flex justify-center flex-direction-column align-items-center"
          v-if="state.list.length == 0"
        >
          <img
            width="90"
            height="90"
            src="//gw.alicdn.com/tfs/TB1U0RydwoQMeJjy1XaXXcSsFXa-220-220.png_190x190q90_.webp"
            alt=""
            class="mt-1 mb-1"
          />
          <p class="mb-1 mt-1" style="font-size: 16px; color: #666666">
            购物车竟然是空的
          </p>
          <span style="font-size: 13px; color: #999999"
            >再忙，也要记得买点什么犒赏自己~</span
          >
        </div>
        <!-- 猜你喜欢 -->
        <div class="recommend">
          <img
            src="https://img.alicdn.com/tfs/TB1V2eQrKSSBuNjy0FlXXbBpVXa-966-114.png"
          />
        </div>
        <!-- 猜你喜欢的数据 -->
        <!-- <RecommendedTab /> -->
      </div>
    </Scroll>

    <!-- 提交订单 -->
    <van-submit-bar
      v-if="state.list.length !== 0"
      :price="store.getters.getgoodsmount.mount"
      button-text="提交订单"
      @submit="onSubmit"
      :disabled="sendDisabled"
    >
      <!-- 全选框 -->
      <div @click="allchecked">
        <van-checkbox v-model="state.allchecked">全选</van-checkbox>
      </div>
    </van-submit-bar>
    <!-- 弹出层 -->
    <van-popup
      round
      close-icon="close"
      closeable
      v-model:show="state.show"
      position="bottom"
      :style="{ height: '83%' }"
    >
      <!-- 内容区 -->
      <!-- 商品图片 -->
      <div class="d-flex content">
        <van-image
          width="110"
          height="110"
          lazy-load
          :src="state.clickItem.img"
          fit="cover"
          @click="lookImg(state.clickItem.img)"
        />
        <!-- 商品价格信息等 -->
        <div class="conentRight">
          <p>￥{{ state.clickItem.price }}</p>
          <p>库存：{{ state.clickItem.skuInfo.totalStock }}</p>
          <p>
            已选：
            <span v-if="state.Colorname == ''">请选择颜色</span>
            <span v-else>{{ state.Colorname }}</span>
            <span class="ml-1" v-if="state.RuleName == ''">请选择尺码</span>
            <span class="ml-1" v-else>{{ state.RuleName }}</span>
          </p>
        </div>
      </div>
      <!-- 颜色参数等 -->
      <div class="rule">
        <!-- 类型 -->
        <h4>{{ state.clickItem.skuInfo.props[0].label }}</h4>
        <van-button
          class="btn"
          round
          type="primary"
          v-for="item in state.clickItem.skuInfo.props[0].list"
          :key="item"
          @click="btn1(item.name)"
          :class="state.Colorname == item.name ? 'active' : ''"
          >{{ item.name }}</van-button
        >
      </div>

      <div class="rule">
        <!-- 类型 -->
        <h4>{{ state.clickItem.skuInfo.props[1].label }}</h4>
        <van-button
          class="btn"
          round
          type="primary"
          v-for="item in state.clickItem.skuInfo.props[1].list"
          :key="item"
          @click="btn2(item.name)"
          :class="state.RuleName == item.name ? 'active' : ''"
          >{{ item.name }}</van-button
        >
      </div>
      <!-- 确认按钮 -->
      <div class="Confirm" @click="close">
        <van-button class="ConfirmBtn" round type="primary">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import Scroll from "@/components/common/Scroll.vue";
import RecommendedTab from "@/components/content/RecommendedTab.vue";
//组件
import { reactive } from "@vue/reactivity";
import { computed, watch } from "@vue/runtime-core";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Dialog,ImagePreview  } from "vant"; //弹出框
const router = useRouter();
const store = useStore();
const state = reactive({
  list: [], //商品数据
  price: 0, //总价格
  checked: false, //单选框
  disabled: true, //提交按钮禁用
  show: false, //弹出层
  clickItem: {}, //弹出层数据
  Colorname: "", //商品颜色名字
  RuleName: "", //参数名字
  allchecked: false,
});

// vuex 数据 返回给 list
state.list = store.state.cart;
// 提交按钮
const onSubmit = () => {
  console.log("提交按钮");
};
// 点击图片
const Clickimg = (id) => {
  console.log(id);
  router.push("/detail/" + id);
   store.commit("setstatus", false);
};
// 全选按钮
const allchecked = () => {
  state.list.forEach((item) => {
    if (state.allchecked) {
      item.checked = true;
    } else {
      item.checked = false;
    }
  });
  localStorage.setItem("cart", JSON.stringify(state.list));
};
// 创建的时候判断是否全选打勾
state.list.forEach((item) => {
  if (item.checked) {
    state.allchecked = true;
  } else {
    state.allchecked = false;
  }
});
// 选择规格按钮
const tags = (list) => {
  state.show = true;
  state.clickItem = list;
  console.log(state.clickItem);
};
// 弹出层内图片点击事件
const lookImg = (src) => {
  ImagePreview([src]);
}
// 颜色点击事件
const btn1 = (name) => {
  state.Colorname = name;
};
//尺寸点击事件
const btn2 = (name) => {
  state.RuleName = name;
};
// 关闭弹出框事件
const close = () => {
  state.show = false;
};
// 点击滑块删除事件
const deletes = (index) => {
  Dialog.confirm({
    message: "确认删除这个宝贝吗",
    cancelButtonText: "我再想想",
  })
  // 点击确认后的回调
    .then(() => {
      state.list.splice(index, 1);
      localStorage.setItem("cart", JSON.stringify(state.list));
    })
    .catch(()=>{

    })
};
// 监听是否每一项都有全选如果有就打开 全选 否则
// 某一项的单选事件
const itemCheckbox = (item) => {
  state.list.find((i) => {
    if (i.id == item.id) {
      i.checked = !i.checked;
    }
  });
  localStorage.setItem("cart", JSON.stringify(state.list));
};
// 结算按钮的 打开关闭
const sendDisabled = computed(() => {
  return !state.allchecked;
});
</script>

<style lang="scss" scoped>
.Confirm {
  position: fixed;
  bottom: 10px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.ConfirmBtn {
  color: white;
  background-image: linear-gradient(to right, #ff7a00, #fe560a);
  border: none;
  width: 95%;
}
h4 {
  margin: 0;
  padding: 10px 0;
}
.active {
  background: linear-gradient(#ff7801, #ff5a0a);
  color: white !important;
}
.conentRight {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
p {
  margin: 0;
  text-align: left;
}
p:first-child {
  color: #fe5f07;
  font-size: 18px;
  font-weight: 600;
}
p:nth-child(2) {
  color: #333333;
  font-size: 12px;
}
p:nth-child(3) {
  color: #333333;
  font-size: 12px;
}
.home {
  margin-bottom: 50px;
}
.van-submit-bar {
  bottom: 49px;
}
.goods-card {
  background: #ffffff !important;
}

.delete-button {
  width: 100px;
  height: 100%;
}
.van-image__img {
  width: 90px !important;
  height: 90px !important;
}

.con {
  background: #f2f2f2;
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 48px;
}
// 猜你喜欢
.recommend {
  display: flex;
  justify-content: center;
  align-items: center;
  // padding: 20px 0;
  height: 60px;
  img {
    width: 161px;
    height: 19px;
  }
}
// 每一项
.item {
  display: flex;
  width: 95%;
  align-items: center;
  height: 180px;
  border-radius: 10px;
  background: #ffffff;
  margin: 10px auto;
  justify-content: space-between;
}
.van-swipe-cell__wrapper {
  height: 100% !important;
}
.name {
  font-size: 13px;
  margin-left: 10px;
  color: #333333;
}
.content {
  padding: 10px;
  border-bottom: 0.005rem solid #f2f2f2;
}
.conentRight {
  margin-left: 10px;
}
.rule {
  border-bottom: 0.005rem solid #f2f2f2;
  padding: 10px;
}
.rule:nth-child(3) {
  border: none;
}
.btn {
  background-color: #f8f8f8 !important;
  color: black;
  border: none;
  margin: 5px;
}
</style>